<template>
  <div class="app-container">
    <div class="search-area" v-show="showSearch">
      <el-form :model="queryParams" ref="queryForm" :inline="true" class="clearfix">
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="queryParams.title"
            placeholder="请输入标题"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <!--        <el-form-item label="消息类型" prop="msgType">
          <el-select v-model="queryParams.msgType" placeholder="消息类型" clearable size="small">
            <el-option
              v-for="dict in msgTypeList"
              :key="dict.msgType"
              :label="dict.name"
              :value="dict.msgType"
            />
          </el-select>
        </el-form-item>-->
        <!--        <el-form-item label="已读状态" prop="readStatus">
          <el-select v-model="queryParams.readStatus" placeholder="已读状态" clearable size="small">
            <el-option label="未读" value="0" />
            <el-option label="已读" value="1" />
          </el-select>
        </el-form-item>-->
        <el-form-item>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main-content">
      <div class="base-card-box">
        <div class="base-card-header">
          <div class="title">消息中心</div>
          <div class="tabs">
            <div class="tabs">
              <div
                class="tabs-item"
                v-for="(item, index) in msgTypeList"
                :key="index"
                :class="{ active: item.msgType == activeName }"
                @click="handleClick(item.msgType)"
              >
                <el-badge :value="item.num" :hidden="item.num <= 0">
                  <span class="tabs-item--span">{{ item.name }}</span>
                </el-badge>
              </div>
            </div>
          </div>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </div>
        <div class="base-card-body">
          <el-table v-loading="loading" :data="messageList">
            <el-table-column
              label="标题"
              align="left"
              prop="title"
              min-width="300"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column label="来源系统" align="center" prop="senderSystem" />
            <el-table-column label="消息类型" align="center" prop="messageType">
              <template slot-scope="scope">
                {{ handleMsgTypeName(scope.row.messageType) }}
              </template>
            </el-table-column>
            <el-table-column label="是否已读" align="center" prop="isRead">
              <template slot-scope="scope">
                <span class="status-point green" v-if="['1'].includes(scope.row.isRead)"></span>
                <span class="status-point red" v-if="['0'].includes(scope.row.isRead)"></span>
                {{ scope.row.isRead == '0' ? '未读' : '已读' }}
              </template>
            </el-table-column>
            <el-table-column label="消息时间" align="center" prop="sendTime" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row, scope.index)">详细</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
    <!-- 消息详细 -->
    <message-detail
      :form="form"
      :open="open"
      @closeDetail="closeDetail"
      @selectNotReadCount="selectNotReadCount"
    ></message-detail>
  </div>
</template>

<script>
import { listMsg, selectNotReadCount } from '@/api/system/message'
import MessageDetail from './messageDetail'

export default {
  name: 'Message',
  components: {
    MessageDetail,
  },
  data() {
    return {
      activeName: '',
      msgTypeList: [
        {
          name: '全部',
          msgType: '',
          num: 0,
        },
        {
          name: '待办',
          msgType: '1',
          num: 0,
        },
        {
          name: '告警',
          msgType: '2',
          num: 0,
        },
        {
          name: '提醒',
          msgType: '3',
          num: 0,
        },
        {
          name: '其它',
          msgType: '4',
          num: 0,
        },
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      names: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 消息表格数据
      messageList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 类型数据字典
      statusOptions: [],
      // 消息类型
      msgCodeList: [],
      msgStatusList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        msgType: '',
        corpClientId: null,
        agentId: null,
        openUserId: null,
        messageBizId: null,
        title: null,
        content: null,
        messageStatusName: null,
        link: null,
        isRead: null,
        status: null,
        readStatus: null,
      },
      // 表单参数
      form: {},
    }
  },
  created() {
    this.getDicts('sys_msg_code').then((response) => {
      this.msgCodeList = response.data
    })
    this.getDicts('sys_msg_status').then((response) => {
      this.msgStatusList = response.data
    })
    this.getList()
    this.selectNotReadCount()
  },
  methods: {
    handleClick(activeName) {
      this.activeName = activeName
      this.queryParams.msgType = this.activeName == 'all' ? '' : this.activeName
      this.getList()
      this.selectNotReadCount()
    },
    formatTime(timestamps) {
      function formatNum(arg0) {
        let str = arg0.toString()
        if (str.length == 1) {
          return '0' + str
        } else {
          return str
        }
      }

      //毫秒补位
      function formatMilliseconds(arg) {
        var str = arg.toString()
        if (str.length == 1) {
          return '00' + str
        } else if (str.length == 2) {
          return '0' + str
        } else if (str.length == 3) {
          return str
        }
      }
      let format = 'yyyy-mm-dd hh:mi:ss'
      var date = new Date(Number(timestamps))
      var finalstr = format
      finalstr = finalstr.replace('yyyy', date.getFullYear()) //年
      finalstr = finalstr.replace('mm', formatNum(date.getMonth() + 1)) //月
      finalstr = finalstr.replace('dd', formatNum(date.getDate())) //天
      finalstr = finalstr.replace('hh', formatNum(date.getHours())) //时
      finalstr = finalstr.replace('mi', formatNum(date.getMinutes())) //分
      finalstr = finalstr.replace('ss', formatNum(date.getSeconds())) //秒
      //finalstr=finalstr.replace('SSS', formatMilliseconds(date.getMilliseconds()));//毫秒
      return finalstr
    },
    handleMsgTypeName(msgType) {
      if (msgType == '1') {
        return '待办消息'
      } else if (msgType == '2') {
        return '告警消息'
      } else if (msgType == '3') {
        return '提醒消息'
      } else {
        return '其他消息'
      }
    },
    // 消息类型字典翻译
    msgCodeFormat(row, column) {
      return this.selectDictLabel(this.msgCodeList, row.msgCode)
    },
    // 消息类型字典翻译
    msgStatusFormat(row, column) {
      return this.selectDictLabel(this.msgStatusList, row.status)
    },
    // 消息类型字典翻译
    isReadFormat(row, column) {
      return row.isRead == '1' ? '是' : '否'
    },
    /** 查询消息列表 */
    getList() {
      this.loading = true
      listMsg(this.queryParams).then((response) => {
        this.messageList = response.data.data
        this.total = response.data.total
        this.loading = false
      })
    },
    selectNotReadCount() {
      selectNotReadCount().then((response) => {
        let count = 0
        for (let i = 0; i < response.data.length; i++) {
          count += response.data[i].numCount
          for (let i1 = 0; i1 < this.msgTypeList.length; i1++) {
            if (this.msgTypeList[i1].msgType == response.data[i].msgType) {
              this.msgTypeList[i1].num = response.data[i].numCount
              break
            }
          }
        }
        this.msgTypeList[0].num = count
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        messageId: null,
        userId: null,
        messageTypeId: null,
        corpClientId: null,
        agentId: null,
        openUserId: null,
        messageBizId: null,
        title: null,
        content: null,
        messageStatusName: null,
        link: null,
        isRead: null,
        delFlag: null,
        createBy: null,
        status: '1',
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    isPC() {
      let flag = window.navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
      return !flag
    },
    /** 详细按钮操作 */
    handleView(row) {
      this.form = row
      this.open = true
    },
    closeDetail() {
      this.open = false
    },
  },
}
</script>
<style lang="scss" scoped>
.status-point {
  display: inline-block;
  height: 8px;
  width: 8px;
  border-radius: 4px;
  margin-right: 2px;
}

.status-point.green {
  background-color: #67c23a;
}

.status-point.red {
  background-color: #f26161;
}

.status-point.yellow {
  background-color: #e6a23c;
}

.base-card-box {
  background-color: #fff;
  border-radius: 8px;
}

.base-card-box .base-card-header {
  /* border-bottom: solid 1px #ebeef5; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* height: 48px; */
  box-sizing: border-box;
}

.base-card-box .base-card-header .title {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  padding-left: 10px;
  position: relative;
}

.base-card-box .base-card-header .title:before {
  position: absolute;
  left: 0;
  top: calc(50% - 9px);
  content: '';
  display: inline-block;
  width: 3px;
  height: 20px;
  background: #097bfb;
  box-shadow: -1px 0px 2px 0px #0e5ed0;
  border-radius: 2px;
  margin-right: 8px;
}

.base-card-box .base-card-header .tabs {
  flex: 1;
  margin-left: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.base-card-box .base-card-header .tabs-item {
  font-size: 14px;
  line-height: 20px;
  color: #909090;
  cursor: pointer;
  margin-right: 16px;
}

.base-card-box .base-card-header .tabs-item.active {
  position: relative;
  color: #097bfb;
  /* background: #0D5DCE; */
  border-radius: 2px;
  font-weight: bold;
}

.base-card-box .base-card-header .tabs-item.active:before {
  position: absolute;
  left: 0;
  bottom: -2px;
  content: '';
  width: 14px;
  height: 2px;
  background: #097bfb;
  border-radius: 1px;
}

.base-card-box .base-card-header .tabs-item .tabs-item--span {
  /* padding: 0 10px; */
}

.base-card-box .base-card-header .more {
  font-size: 14px;
}

.base-card-box .base-card-body {
  padding-top: 24px;
}
</style>
